<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #box{
        width:500px;
        height:500px;
        margin:100px auto;
        border:1px solid red;
    }
    input{
        background: blur;
        color:red;
    }
    ul li{
        width:100px;
        height:100px;
        background:#00c052;
        display: none;
        color: #fff;
        line-height:100px;
        text-align: center;
        font-size:50px;
    }

    .show{
        background: green;
        color: #c4e3f3;
    }
    .show2{
        display: block;
    }
</style>
<script>
	class tab{
		constructor(str){
			this.oBox=document.querySelector(str);
			this.aInt=this.oBox.getElementsByTagName('input');
        	this.aLi=this.oBox.getElementsByTagName('li');
			this.show()
		}
		show(){
			let _this=this;
			for(let i=0;i<this.aInt.length;i++){
	            this.aInt[i].onclick=function(){
	                _this.fn(i)
	            }
	        }
		}
		fn(i){
			for (var j=0;j<this.aLi.length;j++){
                this.aLi[j].className='';
               	this.aInt[j].className='';
            }
            this.aInt[i].className='show';
            this.aLi[i].className='show2';
		}
	}
	
	class Auto extends tab{
		constructor(str){
			super(str);
			this.autofn();
			this.index=0;
		}
		autofn(){
			var _this=this;
			setInterval(function(){
				_this.index++;
				console.log(_this)
				if(_this.index==_this.aInt.length){
					_this.index=0;
				}
				_this.fn(_this.index)
			},5000)
		}
	}
    window.onload=function () {
       new Auto('#box');
    }
    
</script>
<body>
   <div id="box">
       <input type="button" value="111" class="show">
       <input type="button" value="222">
       <input type="button" value="333">
       <ul>
           <li class="show2">1</li>
           <li>2</li>
           <li>3</li>
       </ul>
   </div>
</body>
</html>